<template>
  <el-container>
    <el-aside width="200px">
      <el-row class="tac">
        <el-col :span="12">
          <div id="corInfo">
            <el-image
              :src="require('@/assets/logo.png')"
              fit="cover"
            ></el-image>
            <!-- <div class="el-image">就爱信息科技有限公司</div> -->
          </div>
          <!-- 自己封装的菜单，用着就是爽 -->
          <nav-menu :menus="menus"></nav-menu>
        </el-col>
      </el-row>
    </el-aside>
    <el-container>
      <el-header>
        <user-info></user-info>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>
        <footer-info></footer-info>
      </el-footer>
    </el-container>
  </el-container>
</template>
<script>
import UserInfo from "./UserInfo.vue";
import FooterInfo from "./FooterInfo.vue";
import NavMenu from "./nav/NavMenu.vue";
import routes from "../router/routes";
export default {
  components: { UserInfo, FooterInfo, NavMenu },
  data: function () {
    return {};
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  computed: {
    menus: function () {
      /*
      1、遍历路由的每一个元素或者节点
      2、判断元素中的元信息中有没有hidden属性，并且值是不是为true，并且其具有children属性，并且长度大于0
      3、接上一步，如果是则将children中的所有元素提升到当前节点的高度（升格）
      4、否则直接将当前元素push到一个新数组当中
      */
      // console.log(routes);
      let arr = [];
      routes.forEach((item) => {
        // 当前元素存在hidden属性，并且hidden值为true
        if (item.meta.hidden && item.meta.hidden === true) {
          // 判断当前元素存在children节点，并且其长度大于0
          if (item.children && item.children.length > 0) {
            // 循环
            item.children.forEach((subItem) => {
              // 遍历childre中的元素，判断子元素不存在hidden属性，或者存在hidden属性，但其值为false
              if (!Object.prototype.hasOwnProperty.call(subItem.meta,'hidden') || subItem.meta.hidden === false) {
                arr.push(subItem);
              }
            });
          }
        } else {
          arr.push(item);
        }
      });
      return arr;
    },
  },
};
</script>
<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-aside {
  overflow: hidden !important;
}
.el-menu {
  height: calc(100vh - 61px);
}
.el-avatar {
  margin-right: 5px !important;
}
#corInfo {
  height: 60px;
  width: 200px;
}
.el-main{
  max-height: calc(100vh - 121px);
}
</style>
